<template>
	<view>
		<view v-if="showGoods">
			<u-skeleton rows="15" title :loading="loading">
				<view>
					<u-swiper :list="goodsData.goodsImages" @change="e => currentNum = e.current" height="460rpx" radius="0" :indicator="true" indicatorMode="none" circular :indicatorStyle="{right:'14rpx',bottom:'56rpx'}">
						<view slot="indicator" class="indicator-num" v-if="goodsData.goodsImages && goodsData.goodsImages.length>1">
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ goodsData.goodsImages.length }}</text>
						</view>
					</u-swiper>
				</view>
				<view class="main">
					<view class="u-flex u-p-t-20">
						<!-- <view class="u-flex-1 price">
							<text class="u-f-s-24">￥</text>
							<text class="u-f-bold">{{goodsData.retailPrice}}</text>
						</view> -->
						<view class="u-flex-1 Price">
							￥<view class="text">{{ priceArr[0] }}</view>.{{priceArr[1]}}
							<text class="color9 u-f-s-26 u-m-l-10 lineThrough" style="font-weight: normal;" v-if="memberPrice">￥{{retailPrice}}</text>
						</view>
						<view class="color9 u-f-s-24">已售{{goodsData.monthlySales || 0}}{{goodsData.unit || '件'}}</view>
					</view>
					<view class="box">
						<view class="title">{{goodsData.goodsName}}</view>
						<view class="u-flex u-m-t-20">
							<view class="color9 u-f-s-26">服务</view>
							<view class="colorBlack u-f-s-26 u-m-l-32">随时退<text class="u-f-bold u-p-l-16 u-p-r-16">·</text>立即配送<text class="u-f-bold u-p-l-16 u-p-r-16">·</text>先囤后送</view>
						</view>
					</view>
					<view class="box">
						<view class="title">团购详情</view>
						<view class="colorBlack u-f-s-28 u-f-bold u-p-t-20">主食</view>
						<view class="u-flex u-p-t-20">
							<view class="color3 u-f-s-26 u-flex-1"><text class="u-f-bold u-p-r-16">·</text>米饭</view>
							<view class="color9 u-f-s-26">（1份）</view>
							<view class="colorBlack u-f-s-26">￥6.00</view>
						</view>
					</view>
					<view class="box">
						<view class="title">购买须知</view>
						<view class="colorBlack u-f-s-28 u-f-bold u-p-t-30">有效期</view>
						<view class="color3 u-f-s-26 u-p-t-14">2014年05月28日前可用</view>
						<view class="colorBlack u-f-s-28 u-f-bold u-p-t-30">可用时间</view>
						<view class="color3 u-f-s-26 u-p-t-14">11：00-22：00（周末节假日休息）</view>
					</view>
				</view>
				
				<view class="footer">
					<view class="info u-flex">
						<view class="u-flex-1 price">
							<text class="u-f-s-24">￥</text>
							<text class="u-f-bold">{{memberPrice || retailPrice}}</text>
							<!-- <text class="color9 u-f-s-26 u-m-l-10 lineThrough" v-if="memberPrice">{{memberPrice}}</text> -->
						</view> 
						<view class="btn u-flex-xy-center" :style="[{background:PrimaryColor}]" @click="onSubmit">立即下单</view>
					</view>
					<u-gap :height="systemInfo.tabbarPaddingB"></u-gap>
				</view>
				<view style="padding-top: 132rpx;">
					<u-gap :height="systemInfo.tabbarPaddingB"></u-gap>
				</view>
			</u-skeleton>
		</view>
		<view style="padding-top: 150rpx;" v-else>
			<image src="../../static/mescroll-empty.png" style="width: 260rpx;height: 260rpx;margin: 0 auto;"></image>
			<view class="color9 u-f-s-24 text-center u-m-t-10">商品已下架,去瞧瞧其他商品~</view>
		    <view class="toIndexBtn u-m-t-40" :style="[{background:PrimaryColor}]" @click="onJump('/pages/index/index','tabbar')">去瞧瞧</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from '@/config/baseUrl';
export default {
	data() {
		return {
			baseUrl: base.baseUrl,
			scrollTop:0,
			systemInfo:base.systemInfo,
			currentNum:0,
			
			loading:true,
			showGoods: true, //是否有数据
			goodsId:'',
			goodsData:{},
			retailPrice: '',
			memberPrice: 0,
			priceArr:[],//价格拆分
		}
	},
	computed:{},
	onLoad(e) {
		this.goodsId = e.id
		this.getGoodsData()
	},
	computed:{
	    ...mapState(['PrimaryColor']),
	},
	methods:{
		// 商品信息
		getGoodsData() {
		    let httpData = {
		        shopId: '1275',
		        row: 1,
		        goodsId: this.goodsId,
		    }
			// uni.$u.http.get('/edcapi/Goods_goodsList', {params: httpData}).then(res => {
		        // 模拟接口数据
				var res = {
					id:this.goodsId,
					goodsName:'百香果碧',
					goodsImages:['https://img02.163.gg/img/66/12/16/661216-nlmbpsciqp.png!YM0000'],
					memberPrice:35.99,
					retailPrice:59.99,
					unit:'杯',
					monthlySales:999,
					
				}
		        if(res.id){
					if(res.goodsName){
						uni.setNavigationBarTitle({
							title: res.goodsName
						});
					}
					this.retailPrice = res.retailPrice.toFixed(2) || 0.0
					this.memberPrice = res.memberPrice.toFixed(2) || 0.0
					this.priceArr = this.memberPrice.split('.')
		            this.goodsData = res
		            this.loading = false
		        }else{
		            this.showGoods = false
		            this.loading = false
		        }
		        console.log(this.goodsData, '--goodsData商品信息--')
		    // }).catch(err=>{}) 
		},
		onSubmit(){
			this.$u.toast('提交成功')
		},
	},
	onShow(){},
	onHide(){},
	// 页面被销毁时触发
	onUnload(){},
}
</script>

<style lang="scss" scoped>
.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;
	&__text {
		 color: #FFFFFF;
		 font-size: 12px;
	 }
}
.f-fixed{
	position: fixed;
	left: 0;
	// #ifdef H5
	top: 44px;
	// #endif
	// #ifndef H5
	top: 0;
	// #endif
	width: 750rpx;
	height: 560rpx;
}
.box{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 32rpx;
	margin-top: 24rpx;
	.title{
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
	}
}
.main{
	width: 100%;
	background: #f8f8f8;
	border-radius: 30rpx 30rpx 0px 0px;
	margin-top: -40rpx;
	padding: 0rpx 32rpx 32rpx;
	position: relative;
	z-index: 2;
	min-height: 200rpx;
}
.price{
	color: #fb3d59;
	font-size: 42rpx;
}
.Price{
	display: inline-block;
	color: #fb3d59;
	font-size: 36rpx;
	font-weight: bold;
	.text{
		display: inline-block;
		color: #fb3d59;
		font-size: 60rpx;
		font-weight: bold;
	}
}
.lineThrough{text-decoration:line-through}
.toIndexBtn{
    height: 70rpx;
    width: 200rpx;
    text-align: center;
    line-height:70rpx;
    border-radius: 42rpx;
    color: #fff;
    font-size: 30rpx;
    margin: 0 auto;
	background-color: #fb3d59;
}
.footer{
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 20;
	padding: 26rpx 40rpx;
	background-color: #fff;
	.info{
		height: 80rpx;
		.btn{
			width: 300rpx;
			height: 80rpx;
			background: #fb3d59;
			border-radius: 18rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			&.empty{
				width: 100%;
				border: 2rpx solid #E3E3E3;
				color: #333333;
				background: #fff;
			}
		}
	}
}
</style>